<template>
  <!-- 是否使用v-model   show就是props = defineProps定义的属性值  rules表单校验规则-->
  <el-dialog  :model-value="show" title="添加账号" width="500">
    <el-form :model="form" :rules="rules">
        <!--  prop="username" 要求和username一致，就是必填项 -->
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名" prop="nickName" >
        <el-input v-model="form.nickName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email" >
        <el-input v-model="form.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <!-- :disable="true" 禁用密码框 -->
        <el-input v-model="form.password" autocomplete="off" :disable="id !==0" type="password" />
      </el-form-item>
      <!-- 文本域 rows多少行-->
      <el-form-item label="备注">
        <el-input
            v-model="form.note"
            style="width: 240px"
            :rows="2"
            :type="textarea"
            placeholder="Please input"
        />
      </el-form-item>
      <el-form-item label="是否启用"  prop="status">
            <el-radio-group v-model="form.status">
                <el-radio :value="0" size="small">启用</el-radio>
                <el-radio :value="1" size="small">禁用</el-radio>
            </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emit('hide')">取消</el-button>
        <el-button type="primary" @click="submitFrom">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref ,computed} from 'vue'
//导入elm自定义表单校验规则
import { ElMessage, ElMessageBox ,type FormInstance, type FormRules } from 'element-plus'
import { ok } from 'assert';
//导入添加用户的接口
import { addUserApi,getUserByIdApi,updateUserApi } from '../api/index'
import { watch } from 'vue';


const textarea = ref('')

//全局属性 定义一开始的时候弹窗不显示 为false    
//
const props = defineProps({
    show:{   //从父组件传进来一个show   添加所用的数据模型
      type: Boolean,
      default: false
    },
    id:{   //从父组件传进来一个id    编辑用的数据模型
      type: Number,
      default: 0
    },
    
});

//根据有没有id去看是否 查询用户信息
watch(  //由于props是要在组件初始化后才有  setup是在组件初始化之前 所以必须要监听获取id
  ()=> props.id,
  ()=> {
    // 如果id不等于0 说明是编辑用户 需要根据id查询用户信息
    if (props.id !==0){
      // console.log('这里是子组件里面获取传递进来的id'+ props.id);
      getUserByIdApi(props.id).then((res)=>{
        // console.log('这里是获取的res的数据',res);
        if (res.data.code == 200) {
          //form.username = res.data.username
          //合并对象  把右变的对象 合并到左边的form对象中
          Object.assign(form,res.data.data)   //有重复就覆盖
          console.log('这里是修改后准备使用的新数据：',form);
        }
      })
    }
});



// 定义接收父组件传递的参数 然后下面使用 emit('hide') 关闭弹窗 
const emit = defineEmits(['hide'])

// 使用计算属性来创建一个双向绑定的中间值
// 当 props.show 变化时，dialogVisible 会更新
// 当 dialogVisible 被设置时，会触发 emit('update:show')
// const dialogVisible = computed({
//   get: () => props.show,
//   set: (value) => {
//     emit('emit:show', value)
//   }
// })

//表单数据模型
const form = reactive<IUserModel>({
  username: '',
  password: '',
  email: '',
  nickName: '',
  status: 0,
  note: '',
})
//校验邮箱
const validateEmail = (rules: any, value: any, callback: any)=>{
    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/
    //验证values是否为邮箱
    if (!emailPattern.test(value)){
      return callback(new Error('请输入正确的邮箱！'))
    } else {
      callback()
    }
}

//拿到组件
const formRef = ref<FormInstance>();

//弹窗的表单验证规则
const rules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
    ],
    nickName: [
        { required: true, message: '请输入昵称', trigger: 'blur' },
        { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
    ],
    email: [
        {required: true,validator: validateEmail, message: '请输入正确的邮箱地址', trigger: 'blur' }
    ],
    status: [
        { required: true, message: '请选择状态', trigger: 'change' }
    ]
    
}

//定义一个添加用户的函数
const addUser = () => {
    //添加 添加用户确认的弹窗，
  ElMessageBox.confirm('确认要添加用户吗？','添加用户（标题）',{
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  .then(()=>{
      //提交表单
    addUserApi(form).then((res)=>{
        if (res.code === 200) {
            //提示
            ElMessage.success('添加用户成功！')
            //关闭弹窗  true表示需要刷新数据  在父组件中定义了
            emit('hide',true)
            //刷新数据 父组件已经做到

            //清空表单 elment-plus中form表单的form方法
            formRef.value?.resetFields() 
        }
    })
  })
  .catch(()=>{
    ElMessage.info('取消添加用户！')
  })
    
}

//定义一个编辑用户的函数
const editUser = () => {
  //确认修改的弹窗
  ElMessageBox.confirm('确认要修改用户吗？','修改用户（标题）',{
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  .then(()=>{   //如果确定修改
    ElMessage.success('修改用户成功！')
    //提交表单
    updateUserApi(form).then((res)=>{
      console.log('这里是获取的res的数据',res);
        if (res.code == 200) {
          //提示 +  隐藏弹窗
          ElMessage.success('修改用户成功！')  
          //清空表单 elment-plus中form表单的form方法
          formRef.value?.resetFields() 
          emit('hide',true)
          
        }
    })
    .catch(()=>{
      ElMessage.info('取消修改用户！')
      emit('hide',false)
    });
    emit('hide',true)
  })
}


const submitFrom = () => {
    //console.log(formRef.value?.validate);
    console.log('这里是提交表单的数据',form);
    //如果id是0 说明是添加用户
    if (props.id === 0) {
      ///如果是添加：
      addUser()
    } else {
      //如果是编辑：
      editUser()
    }
    //表单验证 //提交的时候在做一次校验
    // formRef.value?.validate((ok:boolean)=>{
    //     if (ok) {
    //       if (props.id === 0) {
    //         ///如果是添加：
    //         addUser()
    //       } else {
    //         //如果是编辑：
    //         editUser()
    //       }
    //     } else {
    //       console.log('表单验证失败！');
    //     }
    // });
}


</script>
